<template>
	<view class="content">
		<view class="register_img">
			<image mode="scaleToFill" src="https://redblack.oss-cn-beijing.aliyuncs.com/title.jpg"></image>
		</view>
		<view class="register_from">
			<form @submit="register">
				<image class="bg-set" src="https://redblack.oss-cn-beijing.aliyuncs.com/title.jpg"></image>
				<view class="content"></view>
				<view class="register_from_input">
					<view class="register_from_name">手机号</view>
					<view class="register_from_fun"><input type="text" placeholder="请输入手机号码" class="phone" /></view>
				</view>

				<view class="register_from_input">
					<view class="register_from_name">密码</view>
					<view class="register_from_fun"><input type="text" password="true" placeholder="请输入密码"
							v-model="password" class="password" /></view>

				</view>
				<view class="register_from_input">
					<view class="register_from_name">确认密码</view>
					<view class="register_from_fun"><input type="text" password="true" placeholder="再次输入密码"
							v-model="password2" class="password" /></view>
				</view>

				<view class="register_from_input">
					<view class="register_from_name">验证码</view>
					<view class="register_from_fun">
						<input style="width: 40%; text-align: left" type="digit" maxlength="6" placeholder="验证码"
							v-model="code" />
						<text class="getyzm" v-if="yzmbotshou" @click="getyzm">获取验证码</text>
						<text class="getyzm" style="color: #888" v-if="yzmbothide">{{ times }}秒后重新获取</text>
					</view>
				</view>

				<view class="register_from_input">
					<view class="register_from_name">邀请码</view>
					<view class="register_from_fun">
						<input type="text" placeholder="请输入邀请码" />
						<label class="cuIcon-scan cuicon"></label>
					</view>
				</view>

				<view class="register_from_dl">
					<button @click="register">注册</button>
				</view>
				<view class="logo_xieyi">
					<label>
						<checkbox :checked="gouxSta" @click="setCheck" />
					</label>


					<view class="logo_text">请勾选并阅读<text>《注册协议》</text>及<text>《隐私协议》</text></view>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				password: '',
				password2: '',
				gouxSta: false,
				times: 60,
				yzmbotshou: true,
				yzmbothide: false,
				code: undefined
			};
		},
		onLoad() {},
		methods: {
			setCheck() {
				this.gouxSta = this.gouxSta ? false : true;
				this.gouxSta = this.gouxSta ? true : false;
			},

			register() {


				if (this.gouxSta == false) {
					uni.showToast({
						title: "请阅读并勾选用户协议",
						icon: "none",
					});
				} else if (this.gouxSta == true) {
					if (this.password != this.password2) {
						uni.showToast({
							title: "两次密码不一致！",
							icon: "error"
						});
					} else {
						uni.request({
							url: "https://www.fastmock.site/mock/9622fedc10c4460c973964c75742c970/bda01/api/user/register",
							method: "POST",
							success: (res) => {
								console.log(res.data)
								if (res.statusCode == 200) {
									setTimeout(function() {
										uni.navigateTo({
											url: "../../moive/moive"
										})

									}, 2000);
									uni.showToast({
										title: "用户注册成功",
										icon: "success"
									});
								} else {
									uni.showToast({
										title: "注册失败"
									})
								}
							}
						});
					}

					// uni.showToast({
					// 	title: "注册成功！",
					// 	icon: "success",
					// });


				}



			},

			getyzm() {
				uni.request({
					url: "https://www.fastmock.site/mock/9622fedc10c4460c973964c75742c970/bda01/api/code/varification",
					method: "POST",
					success: (res) => {
						this.code = res.data.code
					}
				})
				var num = 60;
				(this.yzmbotshou = false), (this.yzmbothide = true);
				var interval = setInterval(() => {
					if (this.is_sendsms == false) {
						this.sendsms();
					}
					--this.times;
				}, 1000);
				setTimeout(() => {
					clearInterval(interval);
					(this.yzmbotshou = true), (this.yzmbothide = false), (this.times = num);
				}, 60000);
			},


		},
	};
</script>
<style>
	page {
		background: #fff;
	}

	.bg-set {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.register_img {
		width: 100%;
		height: auto;
		margin-top: 90upx;
	}

	.register_img image {
		width: 170upx;
		height: 170upx;
		display: block;
		margin: 0px auto;
		border-radius: 50%;
	}

	.register_from {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 20upx 8%;
	}

	.register_from_input {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #eee solid;
		padding: 40upx 0px;
		margin: 0px auto;
	}

	.register_from_name {
		width: 25%;
	}

	.register_from_fun {
		width: 80%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.register_from_fun input {
		width: 100%;
		text-align: left;
		font-size: 14px;
	}

	.register_from_dl {
		width: 100%;
		height: 50px;
		line-height: 50px;
		margin-top: 150upx;
	}

	.register_from_dl button {
		width: 100%;
		height: 50px;
		line-height: 50px;
		background: #ff3b00;
		color: #fff;
		border-radius: 50px;
	}

	.logo_xieyi {
		width: 100%;
		height: 40px;
		line-height: 40px;
		display: flex;
		flex-direction: row;
		margin-top: 30upx;
		align-items: center;
		color: #444;
		font-size: 14px;
		justify-content: center;
	}

	.logo_xieyi label {
		font-size: 18px;
		margin-right: 1%;
	}

	.cuIcon-squarecheckfill {
		color: #ff3b00;
	}

	.logo_text text {
		color: #ff3b00;
	}

	.getyzm {
		width: 60%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		color: #ff3b00;
	}

	.cuicon {
		font-size: 18px;
	}
</style>
